<template>
  <div style="display: flex; flex-direction: column">
    <div class="mytabelone">
      <div class="mytabeltwo">
        <div style="font-size: 20px">安全库存</div>
        <div class="mysecor" v-if="Product">
          <table class="centered-table">
            <thead>
              <div style="display: flex; border-bottom: 1px solid skyblue">
                <div style="flex: 1">产品列表</div>
                <div style="flex: 1">剩余数量</div>
              </div>
            </thead>
            <tbody>
              <vue-j-scroll
                class="list-style"
                :data="Product"
                :steep="0.3"
                scrollDirection="top"
                :isRoller="true"
                :rollerScrollDistance="50"
                ref="illiteracyone"
              >
                <tr v-for="(item, index) in Product" :key="index">
                  <td class="spanmvc">{{ item.itemName }}</td>
                  <td class="spanmvc" style="color: red">
                    {{ item.quantity }}
                  </td>
                </tr>
              </vue-j-scroll>
            </tbody>
          </table>
        </div>
        <el-empty :image-size="100" v-else></el-empty>
      </div>
      <div class="mytabeltwo">
        <div style="font-size: 20px">资产异常</div>
        <div class="mysecor" v-if="LongTerm">
          <table class="centered-table">
            <thead>
              <div style="display: flex; border-bottom: 1px solid skyblue">
                <div style="flex: 1">异常内容</div>
                <div style="flex: 1">异常类型</div>
                <div style="flex: 1">异常资产名</div>
              </div>
            </thead>
            <tbody>
              <vue-j-scroll
                class="list-style"
                :data="LongTerm"
                :steep="0.3"
                scrollDirection="top"
                :isRoller="true"
                :rollerScrollDistance="50"
                ref="illiteracytwo"
              >
                <tr v-for="(item, index) in LongTerm" :key="index">
                  <td class="spanmvc" @click="checkmyrow(item)">
                    {{ item.errorContent }}
                  </td>
                  <td class="spanmvc" @click="checkmyrow(item)">
                    {{ item.errorType }}
                  </td>
                  <td class="spanmvc" @click="checkmyrow(item)">
                    {{ item.propertyName }}
                  </td>
                </tr>
              </vue-j-scroll>
            </tbody>
          </table>
        </div>
        <el-empty :image-size="100" v-else></el-empty>
      </div>
    </div>
    <div class="mytabelone">
      <div class="mytabeltwo">
        <div style="font-size: 20px">耗材统计</div>
        <div class="mysecor" v-if="Consumable">
          <table class="centered-table">
            <thead>
              <div style="display: flex; border-bottom: 1px solid skyblue">
                <div style="flex: 1">产品列表</div>
                <div style="flex: 1">本月消耗</div>
                <div style="flex: 1">剩余数量</div>
              </div>
            </thead>
            <tbody>
              <vue-j-scroll
                class="list-style"
                :data="Consumable"
                :steep="0.3"
                scrollDirection="top"
                :isRoller="true"
                :rollerScrollDistance="50"
                ref="illiteracytree"
              >
                <tr
                  v-for="(item, index) in Consumable"
                  :key="index"
                  class="checkmyrow"
                >
                  <td class="spanmvc">
                    {{ item.itemName }}
                  </td>
                  <td class="spanmvc">{{ item.thisMonthShipmentNum }}</td>
                  <td class="spanmvc">{{ item.quantity }}</td>
                </tr>
              </vue-j-scroll>
            </tbody>
          </table>
        </div>
        <el-empty :image-size="100" v-else></el-empty>
      </div>
      <div class="mytabeltwo">
        <div style="font-size: 20px">资产统计</div>
        <div class="mysecor" v-if="Asset">
          <table class="centered-table">
            <thead>
              <div style="display: flex; border-bottom: 1px solid skyblue">
                <div style="flex: 1">产品列表</div>
                <div style="flex: 1">本月借出</div>
                <div style="flex: 1">库存数量</div>
              </div>
            </thead>
            <tbody>
              <vue-j-scroll
                class="list-style"
                :data="Asset"
                :steep="0.3"
                scrollDirection="top"
                :isRoller="true"
                :rollerScrollDistance="50"
                ref="illiteracyfore"
              >
                <tr v-for="(item, index) in Asset" :key="index">
                  <td class="spanmvc">{{ item.typeName }}</td>
                  <td class="spanmvc">{{ item.thisMonthLendNum }}</td>
                  <td class="spanmvc">{{ item.quantity }}</td>
                </tr>
              </vue-j-scroll>
            </tbody>
          </table>
        </div>
        <el-empty :image-size="100" v-else></el-empty>
      </div>
    </div>
    <div class="mytabelone">
      <div class="mybottom">
        <div class="tabelbottom">
          <div class="mywrite">
            <div v-if="Outbound">
              <el-timeline :reverse="reverse" v-loading="loading">
                <el-timeline-item
                  v-for="(activity, index) in Outbound"
                  :key="index"
                  style="display: flex"
                >
                  <span style="flex: 1; font-size: 1rem; color: white">
                    [ {{ activity.itemOrPropertyName }} ] &nbsp; ×
                    {{ activity.quantity ? activity.quantity : "1" }} &nbsp;
                    &nbsp;
                  </span>
                  <span style="color: white"
                    >从 {{ activity.warehouseName }} &nbsp;</span
                  >

                  <span style="color: white; flex: 1">
                    {{ activity.createTime }}
                  </span>

                  <span
                    :style="{
                      color:
                        activity.formName == '借出' ||
                        activity.formName == '出库'
                          ? 'red'
                          : 'green',
                    }"
                    style="flex: 1"
                  >
                    &nbsp; [ {{ activity.formName }} ] &nbsp; &nbsp; &nbsp;
                  </span>
                </el-timeline-item>
              </el-timeline>
            </div>
            <el-empty :image-size="100" v-else></el-empty>
          </div>
          <div class="mydivimg">
            <div v-if="imgandvideo">
              <div v-if="Imgvuex || capturedPhoto">
                <img class="myimg" :src="Imgvuex || capturedPhoto" />
              </div>
              <el-empty :image-size="100" v-else></el-empty>
            </div>
            <div v-else>
              <video ref="cameraPreview" autoplay style="height: 300px"></video>
            </div>
            <!-- <video ref="cameraPreview" autoplay></video> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 资产异常的dialog -->
    <el-dialog title="资产异常信息" :visible.sync="dialogVisible" width="30%">
      <div>
        <div style="font-size: 18px; margin: 10px 0px 10px 0px; color: red">
          异常内容
        </div>
        <div style="font-size: 16px">{{ rowdata.errorContent }}</div>
        <div style="font-size: 18px; margin: 10px 0px 10px 0px; color: red">
          异常类型
        </div>
        <div style="font-size: 16px">{{ rowdata.errorType }}</div>
        <div style="font-size: 18px; margin: 10px 0px 10px 0px; color: red">
          异常资产名
        </div>
        <div style="font-size: 16px">{{ rowdata.propertyName }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import TakePhotos from "@/views/TakePhotos.vue";
import {
  listErrorProperty,
  listItemInventoryAndMonthShipment,
  listPropertyInventoryAndMonthLendNum,
  listReceiptShipmentLendReturnHistory,
  listInventoryNumLower,
} from "@/api/index.js";
export default {
  name: "RigthAll",
  components: {
    TakePhotos,
  },
  data() {
    return {
      imgandvideo: false,
      dialogVisible: false,
      loading: null,
      // 产品到期时间  1
      Product: [],
      LongTerm: [],
      Consumable: [],
      Asset: [],
      Outbound: [],
      // 出库记录时间线
      reverse: true,
      // 出库记录
      activities: [],
      capturedPhoto: null,
      tableData: [],
      // 服务器传递的信息
      eventData: [],
      // 仓库id
      wareHouseId: null,
      Imgvuex: this.$store.state.Imgdata,
      imfvuexid: this.$store.state.imgid,
      rowdata: {
        errorContent: "",
        errorType: "",
        propertyName: "",
      },
      // ProductExpirationTime:this.$route.state.ProductExpirationTime,
      // listErrorProperty:this.$route.state.listErrorProperty,
      // ConsumableStatistics:this.$route.state.ConsumableStatistics,
      // AssetStatistics:this.$route.state.AssetStatistics,
      // OutboundRecords:this.$route.state.OutboundRecords,
    };
  },
  computed: {
    ...mapState([
      "ProductExpirationTime",
      "listErrorProperty",
      "ConsumableStatistics",
      "AssetStatistics",
      "OutboundRecords",
      "warehouseId",
      "Imgdata",
      "imgid",
      "setmylongtime"
    ]),
  },
  mounted() {
    const res = JSON.parse(localStorage.getItem("Warehouse"));
    const myfrom = JSON.parse(localStorage.getItem("myfrom"));
    if (myfrom.warehouseName === "值班室") {
      this.imgandvideo = true;
      this.wareHouseId = res[0].id;
    } else {
      this.wareHouseId = localStorage.getItem("setmywarehouseId");
      this.startCamera();
    }
    this.loading = this.$loading({
      lock: true,
      text: "获取数据中，请稍后",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    this.handlemypoto();
    this.$nextTick(() => {
      this.getlistPropertyInventory();
    });
  },
  watch: {
    setmylongtime(newvalue){
      this.getlistPropertyInventory();
    },
    ProductExpirationTime(newvalue) {
      this.Product = newvalue
    },
    listErrorProperty(newvalue) {
      this.LongTerm = newvalue
    },
    ConsumableStatistics(newvalue) {
     this.Consumable = newvalue
    },
    AssetStatistics(newvalue) {
      this.Asset = newvalue
    },
    OutboundRecords(newvalue) {
     this.Outbound = newvalue
    },
    warehouseId(newvalue) {
      this.wareHouseId = this.$store.state.warehouseId;
      console.log(this.wareHouseId, this.$store.state.warehouseId);
      this.getlistPropertyInventory();
    },
    capturedPhoto(newvalue) {
      this.handlemypoto();
    },
    Imgdata(newvalue) {
      this.Imgvuex = this.$store.state.Imgdata;
      this.imfvuexid = this.$store.state.imgid;
    },
  },
  methods: {
    async startCamera() {
      try {
        // 获取摄像头媒体流
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
        });

        // 将媒体流绑定到视频元素
        const videoElement = this.$refs.cameraPreview;
        videoElement.srcObject = stream;

        // 存储媒体流，以便稍后关闭
        this.cameraStream = stream;
      } catch (error) {
        console.error("Error accessing camera:", error);
      }
    },
    checkmyrow(data) {
      this.rowdata = {
        errorContent: "",
        errorType: "",
        propertyName: "",
      };
      this.rowdata.errorContent = data.errorContent;
      this.rowdata.errorType = data.errorType;
      this.rowdata.propertyName = data.propertyName;
      this.dialogVisible = true;
      console.log(data);
    },
    handlemypoto() {
      const phto = JSON.parse(
        localStorage.getItem(localStorage.getItem("setmywarehouseId"))
      );
      this.capturedPhoto = this.capturedPhoto ? this.capturedPhoto : phto;
    },
    // 时间 处理
    formatCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const hours = now.getHours().toString().padStart(2, "0");
      const minutes = now.getMinutes().toString().padStart(2, "0");
      const seconds = now.getSeconds().toString().padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getlistPropertyInventory() {
      this.loading = this.$loading({
        lock: true,
        text: "获取数据中，请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (this.wareHouseId == this.imfvuexid) {
        this.Imgvuex = this.$store.state.Imgdata;
      } else {
        this.Imgvuex = null;
      }

      // 安全库存  1
      listInventoryNumLower({
        pageNumber: 0,
        pageSize: 10,
        wareHouseId: this.wareHouseId,
      }).then((responce) => {
        console.log(responce, "首次 安全库存");
        if (responce.data.length) {
          this.Product = responce.data;
          this.$refs.illiteracyone?.stop();
        } else {
          this.Product = null;
        }
      });

      // 资产异常 2
      listErrorProperty({
        dayNum: 2,
        wareHouseId: this.wareHouseId,
      }).then((responce) => {
        console.log(responce, "首次 资产异常");
        if (responce.data.length) {
          this.LongTerm = responce.data;
          this.$refs.illiteracytwo?.stop();
        } else {
          this.LongTerm = null;
        }
      });

      // 耗材统计 3
      listItemInventoryAndMonthShipment({
        wareHouseId: this.wareHouseId,
      }).then((responce) => {
        if (responce.data.length) {
          this.Consumable = responce.data;
          this.$refs.illiteracytree?.stop();
        } else {
          this.Consumable = null;
        }
        this.handlemypoto();
        console.log(responce, "首次 耗材统计");
      });

      // 资产统计 4
      listPropertyInventoryAndMonthLendNum({
        wareHouseId: this.wareHouseId,
      }).then((responce) => {
        if (responce.data.length) {
          this.Asset = responce.data;
          this.$refs.illiteracyfore?.stop();
        } else {
          this.Asset = null;
        }
        console.log(responce, "首次 资产统计");
      });

      //  出库纪录 5
      listReceiptShipmentLendReturnHistory({
        wareHouseId: this.wareHouseId,
      }).then((responce) => {
        this.loading = false;
        const res = responce.data;
        console.log(responce.data);
        if (
          responce.data[0]?.formTpe == 41 ||
          responce.data[0]?.formTpe == 42
        ) {
          this.capturedPhoto = responce.data[0].fileList[0]?.url;
        } else {
          this.capturedPhoto = null;
        }
        if (res?.length) {
          this.Outbound = JSON.parse(JSON.stringify(res)).reverse();
        } else {
          this.Outbound = null;
        }
        console.log(this.Outbound, "首次 出库纪录");
      });
      this.loading.close();
    },
  },
};
</script>

<style>
.list-body {
  cursor: pointer;
}
/* 出库记录+图片 父盒子*/
.mybottom {
  color: white;
  flex: 1;
  display: flex;
  margin: 0 1rem 1rem 1rem;
}
/* 材料预警 父盒子 */
.mytabelone {
  color: white;
  flex: 1;
  display: flex;
}
/* 所有盒子边框 */
.mytabeltwo {
  flex: 1;
  border: 2px solid skyblue;
  border-radius: 2rem;
  margin: 0 1rem 1rem 1rem;
  text-align: center;
}
/* 所有滑动条 */
.mysecor {
  margin: 0 auto;
  width: 90%;
  max-height: 15rem;
  overflow: auto;
}
/* 所有表格样式 设置表格居中对齐和上下间距 */
.centered-table {
  margin: 2px auto; /* 用于居中表格 */
  text-align: center; /* 用于居中文本内容 */
  border-collapse: collapse;
  width: 95%; /* 限制表格宽度 */
  max-height: 15rem;
}
/* 所有表格的th td样式 */
.centered-table tr {
  display: flex;
  width: 100%;
  padding: 1% 0 1% 0;
  margin: 1% 0 1% 0;
  border-bottom: 1px solid skyblue;
}

/* 出库记录 边框设置 */
.tabelbottom {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 2px solid skyblue;
  border-radius: 2rem 0 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 出库记录 样式 */
.mywrite {
  padding-top: 1rem;
  flex: 2;
  max-height: 18rem;
  overflow: auto;
  margin-right: 1rem;
}

.mydivimg {
  flex: 1;
  padding-top: 8px;
  padding-right: 8px;
}
/* 出库记录 样式 */
.myimg {
  float: right;
  width: 18rem;
  height: 18rem;
}

.list-style {
  height: 15rem;
}

.spanmvc {
  flex: 1;
  color: white;
  font-size: 1rem;
  height: 96%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出部分的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
  max-width: 220px; /* 可根据需要设置最大宽度 */
  cursor: pointer;
}

/* 修改滚动条的轨道（Track）样式 */
::-webkit-scrollbar {
  width: 0.5rem; /* 设置滚动条宽度 */
  height: 20px;
}

/* 修改滚动条的滑块（Thumb）样式 */
::-webkit-scrollbar-thumb {
  background: skyblue; /* 设置滚动条滑块的背景颜色 */
  border-radius: 6px; /* 设置滚动条滑块的圆角 */
}

/* 修改滚动条的轨道（Track）背景样式 */
::-webkit-scrollbar-track {
  background: #030c13; /* 设置滚动条轨道的背景颜色 */
}

/* 修改滚动条的轨道（Track）背景样式，当鼠标悬停在滚动条上时 */
::-webkit-scrollbar-track:hover {
  background: #030c13; /* 设置悬停时的背景颜色 */
}
</style>